<script>
import ModuleCard from "../../components/business/module-card/index.vue";
import UForm from "../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UInput from "../../uni_modules/uview-ui/components/u--input/u--input.vue";
import UFormItem from "../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UCode from "../../uni_modules/uview-ui/components/u-code/u-code.vue";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
import {getVerificationCodeApi, updatePasswordApi} from "../../api/common/user";
import {isPhone, isPwd} from "../../static/utils/validate";
import {successBack} from "../../static/utils/msg";
export default {
  name: "index",
  components: {UButton, UCode, UFormItem, UInput, UForm, ModuleCard},
  data() {
    return {
      formData: {
        phone: "",
        password: "",
        code: "",
        agin: "",
      },
      rules: {
        field: [
          {required: true, message: "请输入手机号码", trigger: "blur"},
          {min: 11, max: 11, message: "请输入正确的手机号码", trigger: "blur"},
        ],
      },
      disabledSend: false,
      time: 60,
    };
  },
  methods: {
    async getCode() {
      if (!this.formData.phone) {
        // 提示
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      await getVerificationCodeApi(this.formData.phone);
      this.disabledSend = true;
      let timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          clearInterval(timer);
          this.disabledSend = false;
          this.time = 60;
        }
      }, 1000);
    },
    async submit() {
      // 判断手机号
      if (!isPhone(this.formData.phone)) {
        // 提示
        uni.showToast({
          title: '请输入11位正确的手机号码',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      // 判断验证码
      if (!this.formData.code) {
        // 提示
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      // 判断密码
      if (!isPwd(this.formData.password)) {
        // 提示
        uni.showToast({
          title: '密码长度为6-16位',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      // 判断确认密码是否一致
      if (this.formData.password !== this.formData.agin) {
        // 提示
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      await updatePasswordApi({
        confirmCode: this.formData.code,
        password: this.formData.password,
        mobile: this.formData.phone,
      })
      // uni.showToast({
      //   title: '修改成功',
      //   icon: 'none',
      //   duration: 2000
      // });
      successBack('修改成功')
    }
  },
}
</script>

<template>
  <view>
    <u--form
        labelPosition="left"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
        :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
    >
      <module-card>
        <u-form-item
            label="手机号码"
            prop="formData.phone"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.phone"
              border="none"
              type="number"
              placeholder="请输入手机号码"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="验证码"
            prop="formData.code"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.code"
              border="none"
              placeholder="请输入验证码"
          >
          </u--input>
          <template slot="right">
            <u-button
                color="#dab386"
                :text="disabledSend ? `重新获取(${time})` :'获取验证码'"
                :disabled="disabledSend"
                class="code" size="small"
                @click="getCode"
            />
          </template>
        </u-form-item>
        <u-form-item
            label="新密码"
            prop="formData.password"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.password"
              border="none"
              password
              placeholder="请输入密码"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="确认密码"
            prop="formData.agin"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.agin"
              border="none"
              password
              placeholder="请再次输入密码"
          ></u--input>
        </u-form-item>
      </module-card>
    </u--form>

    <view class="footer">
      <u-button
          type="primary"
          class="footer-btn"
          color="#dab386"
          @click="submit"
      >确认修改</u-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.code{
  color: #1396db;
  font-size: 14px;
  padding: 0 10px;
  border-left: 1px solid #1396db;
}

//吸底按钮
.footer{
  width: 100%;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
